<template>
  <DialogSubmitForm v-bind="formFrame" ref="form">
    <template #productImage="{ cellRenderFrame, cellRenderData }">
      <ProductImageUpload ref="productImage" v-model="cellRenderData[cellRenderFrame.key]" :size="80" />
    </template>
  </DialogSubmitForm>
</template>
<script setup lang="ts">
import { MDialogSubmitForm as DialogSubmitForm } from "page-com";
import { shallowReactive, useTemplateRef } from "vue";
import { DialogSubmitFormFrame, DialogSubmitFormInstance } from "page-com";
import ProductImageUpload from "./ProductImageUpload.vue";
const form = useTemplateRef<DialogSubmitFormInstance>("form");
const formFrame = shallowReactive<DialogSubmitFormFrame>({
  submitFun: async function (data) {
    emit("saveSuccess", data);
    form.value.hide();
  },
  width: "400px",
  items: [
    {
      frameType: "slot",
      slot: "productImage",
      key: "detailImages",
      label: "详情图"
    }
  ]
});

function show(vo: { detailImages: string[] }) {
  form.value.show(vo);
}

defineExpose({ show });
const emit = defineEmits<{
  saveSuccess: [data: { detailImages: string[] }];
}>();
</script>
